var body=document.getElementById('body');
var trs=body.getElementsByTagName('tr');
var cb=body.getElementsByTagName('input');
var del=document.getElementById('btnDeleted');
var all=document.getElementById('all');
var txt=document.getElementById("txt");

//1、自定义对象：设置不同颜色（奇偶行、鼠标移入行）
//该对象包含：3个属性分别设置3种颜色，1个方法；给传入的参数对象设置颜色
var RowsColor={
	/*odd:"gray",
	even:"white",
	selected:"red",
	*/
	setColor:function(trs){
		for(var i=0;i<trs.length;i++){
			//定义奇偶行原来颜色
			trs[i].originColor=(i%2==0?"white":"gray");
			//默认奇偶行颜色
			trs[i].style.background=trs[i].originColor;
			//鼠标移入颜色
			trs[i].onmouseover=function(){
				this.style.background="red";
			}
			//鼠标移出颜色
			trs[i].onmouseleave=function(){
				this.style.background=this.originColor;
			}
		}
	}
}
//2、显示文字：记录选中的数字
function displayNumber(){
	//邮件总数
	var total=trs.length;
	//选中的邮件数目
	var count=0;
	//循环操作：复选框被选中 count++
	for(var i=0;i<trs.length;i++){
		if(cb[i].checked){
			count++;
		}
	}
	txt.innerHTML="一共有"+total+"封邮件，你选中了"+count+"封邮件";
}
//3、第一个复选框：全选反选
function allSelect(){
	/*1、循环操作：根据全选复选框是否被选中来设置每一行前面的复选框
	 * 2、调用显示文字函数
	 */
	for(var i=0;i<trs.length;i++){
		cb[i].checked=this.checked;
	}
	displayNumber();
}
//5、删除功能：循环吧选中的复选框所在的行删除
function deleteEvent(){
	for(var i=0;i<trs.length;i++){
		if(cb[i].checked){
			//删除选中的行：从父元素中删除子元素：parent.removeChild(child)
			//trs[i].parentElement.removeChild(trs[i]);
			trs[i].remove();
			i--;
		}
	}
	displayNumber();
}
//设置每一行颜色
RowsColor.setColor(trs);
//调用显示文字函数
displayNumber();
//调用全选/反选函数
all.onclick=allSelect;

//4、每行的复选框：单个选中或取消，影响显示文字
for(var i=0;i<cb.length;i++){
	cb[i].onclick=function(){
		displayNumber();
	}
}
//给删除按钮添加点击事件
del.onclick=deleteEvent;

